<template>
    <div style="width: 100%; height: 100%" id="main1"></div>
</template>
  
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            var chartDom = document.getElementById('main1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                graphic: {
                    elements: [
                        {
                            type: 'text',
                            left: 'center',
                            top: '3',
                            style: {
                                text: '车 辆 运 营 概 况',
                                fontSize: 30,
                                fontWeight: 'bold',
                                lineDash: [0, 200],
                                lineDashOffset: 0,
                                fill: 'transparent',
                                stroke: '#fff',
                                lineWidth: 1
                            },
                            keyframeAnimation: {
                                duration: 4000,
                                loop: true,
                                keyframes: [
                                    {
                                        percent: 0.7,
                                        style: {
                                            fill: 'transparent',
                                            lineDashOffset: 200,
                                            lineDash: [200, 0]
                                        }
                                    },
                                    {
                                        // Stop for a while.
                                        percent: 0.8,
                                        style: {
                                            fill: 'transparent'
                                        }
                                    },
                                    {
                                        percent: 1,
                                        style: {
                                            fill: '#fff'
                                        }
                                    }
                                ]
                            }
                        }
                    ]
                }
            };

            option && myChart.setOption(option);

        }

    },
};
</script>
  